<script setup>
import { ref, watch } from 'vue';
const checked = ref(false);
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  }
})

watch(checked, (newVal) => {
  console.log(newVal)
  if(!newVal) {
    emit('clear')
  }
})

const emit = defineEmits(['click', 'clear'])
</script>
<template>
  <view class="text-(sm #333333) font-semibold mt-3 flex" @click="checked = !checked">
    <view class="mr-1 mt-0.5" :class="[checked ? 'i-mdi-check-circle text-#1373FF' : 'i-mdi-circle-outline text-#999999']"></view>
    {{title}}
  </view>
  <view class="text-sm line-clamp-1 py-3 border-b-(~ solid #F4F6F7)" :class="{'text-#808080': value == ''}" @click="$emit('click')" v-show="checked">
    {{ value || '选择一个最擅长的业务标签' }}
  </view>
</template>